<template>
    <div class="template" style="background-color: #000;position: relative;">
        <img :src="homeBG" style="width: 100vw;height: 100vh;" />
        <div class="temMain info">
            <!-- <img :src="homeTop" class="homeTop"/> -->
            <img :src="gonow" class="gonow" @click="router.push('/make?type=0')"/>
            <div class="hot">Hot Style</div>
            <img :src="tiao2" class="tiao" @click="router.push('/make?type=0')"/>
            <img :src="tiao1" class="tiao" @click="router.push('/make?type=1')"/>
            <div class="hot" style="margin-top: 0;">Store</div>
            <img :src="tiao3" class="tiao" @click="router.push('/store')"/>
        </div>
    </div>
</template>
<script setup>
import homeBG from '../assets/homeBG.png'
import gonow from '../assets/gonow.png'
import tiao1 from '../assets/tiao1.png'
import tiao2 from '../assets/tiao2.png'
import tiao3 from '../assets/tiao3.png'
import { useRouter } from 'vue-router';
import { onMounted } from 'vue'
const router = useRouter()
onMounted(() => {
    if(!localStorage.getItem('workLicenseFirst')) {
        localStorage.setItem('workLicenseNum', 20)
        localStorage.setItem('workLicenseFirst', 1)
	}
})
</script>

<style scoped>
@import '../font/index.css';
.homeTop {
    margin-top: 30px;
    width: 302px;
    height: 35vh;
}
.gonow {
    margin-top: 42vh;
    width: 162px;
    /* height: 10vh; */
    /* height: 9.5vh; */

}
.hot {
    font-family: RubikBlack;
    font-weight: 900;
    font-size: 24px;
    color: #fff;
    width: 100%;
    margin: 10px;
}
.tiao {
    width: 100%;
    height: 9.5vh;
    margin-bottom: 10px;
}
</style>